<template>
  <div style="max-width: 800px;width: 100%;height: 100%">
    <div class="container">
      <div class="content" ref="contentRef">
        <chatItem :message="item" v-for=" (item , index) in chatStore.currentChatList" :key="index">
        </chatItem>

      </div>
      <footer>
        <yd-textarea @keyup.enter="sendQuestion"  v-model="intent.content"  style="width: 100%">
          <template v-slot:left>
            <t-button @click="chatStore.deepSeek = !chatStore.deepSeek" :theme="chatStore.deepSeek ? 'primary' : ''"  variant="outline">
              <template #icon>
                <SunnyIcon />
              </template>
              深度思考</t-button>
          </template>
          <template v-slot:right>
            <t-button style="margin-right: 10px" shape="circle" ghost theme="primary">
              <template #icon>
                <CloudUploadIcon />
              </template>
            </t-button>
            <t-button @click="sendQuestion" shape="circle">
              <template #icon>
                <SendIcon style="transform: rotateZ(-90deg)" />
              </template>
            </t-button>
          </template>
        </yd-textarea>
      </footer>
    </div>
  </div>

</template>

<script setup>
import chatItem from '@/components/chat/chatContent/chatItem/index.vue'
import ydTextarea from '@/components/common/textarea/index.vue'
import {CloudUploadIcon, SendIcon, SunnyIcon} from "tdesign-icons-vue-next";
import {useChatStore} from "@/store/chat/index.js";
import {ref} from "vue";
import {useSystemStore} from "@/store/system/index.js";


const chatStore = useChatStore();
const systemStore = useSystemStore();

const contentRef = ref(null);

// 用户意图
const intent = ref({
  content: "",
  role: 'user'
})

const sendQuestion = () => {
  if (!intent.value.content) {
    systemStore.sendSystemNotification("请输入文本！" , "warning")
    return;
  }
  chatStore.sendQuestion(intent.value)
  intent.value.content = '';
  chatStore.scrollToBottom(contentRef.value)
}




</script>


<style scoped>
.content {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  /* Firefox */
  scrollbar-width: thin;               /* 细条 */
  scrollbar-color: rgba(214, 214, 214, 0.3) transparent;  /* 拇指色 + 轨道色 */
}

/* Webkit 浏览器 (Chrome、Safari、Edge) */
.content::-webkit-scrollbar {
  width: 6px;      /* 滚动条宽度 */
}

.content::-webkit-scrollbar-track {
  background: transparent;  /* 轨道透明 */
}

.content::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3); /* 滑块颜色 */
  border-radius: 3px;                    /* 圆角 */
}

.content::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.5); /* 悬停时加深 */
}

footer {
  width: 100%;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 20px;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  box-sizing: border-box;
  position: relative;
  padding-bottom: 200px;
}

</style>
